import ToolbarItem from "@/components/toolbar/ToolbarItem.vue";
import { i18n } from "@/locales";
import type { Editor } from "@/tiptap";
import { Extension } from "@tiptap/core";
import { markRaw } from "vue";
import RiFullscreenLine from "~icons/ri/fullscreen-line";
import RiFullscreenExitLine from "~icons/ri/fullscreen-exit-line";

export interface FullscreenStorage {
  isFullscreen: boolean;
}

const Fullscreen = Extension.create<{}, FullscreenStorage>({
  name: "fullscreen",

  addStorage() {
    return {
      isFullscreen: false,
    };
  },

  addOptions() {
    return {
      getToolbarItems({ editor }: { editor: Editor }) {
        return {
          priority: 999,
          component: markRaw(ToolbarItem),
          props: {
            editor,
            isActive: editor.storage.fullscreen?.isFullscreen,
            icon: markRaw(
              editor.storage.fullscreen?.isFullscreen
                ? RiFullscreenExitLine
                : RiFullscreenLine
            ),
            title: editor.storage.fullscreen?.isFullscreen
              ? i18n.global.t("editor.extensions.fullscreen.exit")
              : i18n.global.t("editor.extensions.fullscreen.enter"),
            action: () => {
              editor.commands.toggleFullscreen();
            },
          },
        };
      },
    };
  },

  addCommands() {
    return {
      toggleFullscreen:
        () =>
        ({ editor }) => {
          editor.storage.fullscreen.isFullscreen =
            !editor.storage.fullscreen.isFullscreen;
          return true;
        },
      setFullscreen:
        (fullscreen: boolean) =>
        ({ editor }) => {
          editor.storage.fullscreen.isFullscreen = fullscreen;
          return true;
        },
    };
  },
});

export default Fullscreen;
